<script lang="ts" setup>
import { ref } from 'vue'
import {
  Check
} from '@element-plus/icons-vue'
const fullscreenLoading = ref(false)
const textarea = ref('')
const radio1 = ref('1')

const loading = () => {
  fullscreenLoading.value = true
  setTimeout(() => {
    fullscreenLoading.value = false
  }, 2000)
}
</script>

<template>
  <div class="contentPuncation">
    <div class="head">智能标点</div>
    <div class="bottom">
      <el-input v-model="textarea" class="inputcontent" :rows="2" :autosize="{ minRows: 4, maxRows: 7 }" type="textarea"
        resize="none" placeholder="请输入待标点的文字" />
      <div class="icon">
        <el-radio-group v-model="radio1">
          <el-radio value="1" size="large">现代标点</el-radio>
          <el-radio value="2" size="large">句读</el-radio>
        </el-radio-group>
        <el-button type="primary" style="margin-left: 3vw;" :icon="Check" @click="loading"
          v-loading.fullscreen.lock="fullscreenLoading">进行标点</el-button>
      </div>
    </div>
  </div>


</template>


<style scoped>
.head {
  font-size: clamp(40px, 2vw, 60px);
  font-weight: 600;
  margin-top: 3vh;
}

.contentPuncation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 90vh;
}

.bottom {
  width: 50vw;
  min-width: 400px;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  padding-bottom: 25px;
}

.icon {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: end;
}

.inputcontent {
  font-size: clamp(16px, 1vw, 30px);
}

@media (max-width:400px) {
  .contentPuncation {
    width: 100%;
    margin-top: 10vh;
  }

  .head {
    font-size: 6vw;
  }

  .bottom {
    width: 75vw;
    min-width: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
    padding-bottom: 5px;
  }

  .contentPuncation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 80vh;
  }

  .inputcontent {
    font-size: 13px;
  }
}
</style>
